<div class="container-fuild">
    <div class="row">
        <div class="col-xs-6">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    路由带过来的数据
                </div>
                <div class="panel-body text-danger">
                    {{num}}
                </div>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    请求数据的连接
                </div>
                <div class="panel-body text-danger">
                    https://jsonplaceholder.typicode.com/posts?userId=1
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <div class="panel panel-danger">
                <div class="panel-heading">
                    一个异步请求回的数据去渲染一个表格
                </div>
                <div class="panel-body">
                    <table class="table table-striped">
                        <caption>这些数据是请求接口来的</caption>
                        <thead>
                            <tr>
                                <th>id</th>
                                <th>用户id</th>
                                <th>标题</th>
                                <th>内容</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr ng-repeat="item in res">
                                <td>{{item.userId}}</td>
                                <td>{{item.id}}</td>
                                <td>{{item.title}}</td>
                                <td>{{item.body}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-6">
            <div class="panel panel-success">
                <div class="panel-heading">page2.html</div>
                <div class="panel-body">
                    <pre class="lang-html" ng-non-bindable>
                        <code>
&lt;table class="table table-striped">
    &lt;caption>这些数据是请求接口来的&lt;/caption>
    &lt;thead>
        &lt;tr>
            &lt;th>id&lt;/th>
            &lt;th>用户id&lt;/th>
            &lt;th>标题&lt;/th>
            &lt;th>内容&lt;/th>
        &lt;/tr>
    &lt;/thead>
    &lt;tbody>
        &lt;tr ng-repeat="item in res">
            &lt;td>{{item.userId}}&lt;/td>
            &lt;td>{{item.id}}&lt;/td>
            &lt;td>{{item.title}}&lt;/td>
            &lt;td>{{item.body}}&lt;/td>
        &lt;/tr>
    &lt;/tbody>
&lt;/table>

                        </code>
                    </pre>
                </div>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="panel panel-success">
                <div class="panel-heading">page2.js</div>
                <div class="panel-body">
                    <pre class="lang-javascript">
                        <code>
const ctrl = ['$scope', '$stateParams', '$http', 'locals', 'prism', function ($scope, $stateParams, $http, locals, prism) {
    prism.prism();
    // 获取url的参数
    $scope.num = $stateParams.id;
    // 进行一次http-get请求
    $http({
        method: 'GET',
        url: `https://jsonplaceholder.typicode.com/posts?userId=1`
    }).then(
        // 将所得数据res传给局部变量$scope.res，html中可以用ng-repeat渲染。
        res => {
            $scope.res = res.data;
        }
    )
}]

export default ctrl;
                        </code>
                    </pre>
                </div>
            </div>
        </div>

    </div>
</div>